<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="true" :safe-area-inset-bottom="false">
			<template #top>
			<!-- tab栏 -->
			<v-tabs v-model="current" field="name" :tabs="tabs" @change="changeTab" height="86rpx" color="#626576"
				activeColor="#3B7AFE" lineColor="#3B7AFE" fontSize="30rpx"></v-tabs>
			</template>
			<view class="list">
				<view class="list-item" v-for="i in dataList" :key="i.id" @click="handleDetail(i)">
					<view class="list-item-top">
						<view class="title">
							{{ i.get_product?.name }}
						</view>
						<view class="btn">{{ tabs.find(v=>v.id == i.status).name}}</view>
					</view>
					<view class="list-item-body">
						<view>
							<view class="label">客户姓名</view>
							<view class="value">{{ i.username }}</view>
						</view>
						<view>
							<view class="label">公司名称</view>
							<view class="value">{{ i.business_name }}</view>
						</view>
						<view>
							<view class="label">申请时间</view>
							<view class="value">{{ i.created_at }}</view>
						</view>
					</view>
					<!-- <view class="footer">
						<view class="footer-btn">
							核额资料
						</view>
					</view> -->
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect,
		onMounted
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getHttpApi
	} from '@/api/api.js'
	const paging = ref(null);
	const current = ref(0)
	const status = ref(null)
	onLoad(async(options) => {
		status.value = options.id
		current.value = tabs.value.findIndex(v=> v.id == options.id)
	})
	const tabs = ref([
		{ name:'全部',id:''},
		{ name:'申请中',id:1},
		{ name:'已授信',id:2},
		{ name:'已拒绝',id:3},
		{ name:'已放款',id:4},
		{ name:'已结清',id:5},
		{ name:'逾期中',id:6},
		{ name:'已提交',id:7},
	])
	const changeTab = (item,index) => {
		console.log('当前选中的项：' + index)
		status.value = item.id
		paging.value.reload()
	}
	const dataList = ref([])
	const queryList = async (page, limit) => {
		try {
			let res = await getHttpApi({
				route: 'Newfinance.loanFinanceLog',
				page,
				limit,
				status: status.value,
			});
			paging.value.complete(res.data.data);
		} catch (e) {
			paging.value.complete(false);
		}
	}
	const handleDetail = (i)=> {
		uni.navigateTo({
			url:`/pages/daiKuan/details?id=${i.id}`
		})
	}
</script>
<style>
	page{
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.footer{
		display: flex;
		justify-content: end;
		&-btn{
			font-weight: 400;
			font-size: 24rpx;
			color: #3D3D3D;
			width: 126rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 200rpx;
			border: 2rpx solid #DEDEDE;
			box-sizing: border-box;
			text-align: center;
		}
	}
	.list{
		padding: 20rpx 24rpx;
		&-item{
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 18rpx;
			padding: 32rpx 38rpx;
			&-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			&-body{
				padding-top: 24rpx;
				display: flex;
				    flex-direction: column;
				    gap: 12rpx; /* 设置子元素之间的上下间距为 20px */
				&>view{
					display: flex;
				}
			}
		}
	}
	.title{
		font-weight: 400;
		font-size: 30rpx;
		color: rgba(0,0,0,0.898);
		line-height: 30rpx;
	}
	.btn{
		font-weight: 400;
		font-size: 28rpx;
		color: #1A64FF;
		line-height: 30rpx;
	}
	.label{
		font-weight: 400;
		font-size: 24rpx;
		color: #7A7A7A;
		line-height: 30rpx;
		margin-right: 24rpx;
	}
	.value{
		flex: 1;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		line-height: 30rpx;
	}
</style>